<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>运单列表</el-breadcrumb-item>
        </el-breadcrumb><br>
        <div class="top_btn">
            <el-button type="primary" icon="el-icon-plus" @click="create_order"></el-button>
        </div>
        <el-tabs type="border-card" class="card-table"  @tab-click="handleClick" value="1">
            <el-tab-pane label="全部运单" name="1">
                <el-table
                    :data="order_list"
                    style="width: 100%">
                    <el-table-column
                        prop="invoice"
                        label="发货单号"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="shipping_addresses"
                        label="发货地址"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        label="创建时间"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="username"
                        label="客户名称">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="公司地址"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="contacts"
                        label="联系人姓名"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="phone"
                        label="联系人电话"
                        width="180">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="在途运单" name="2">
                
                <el-table
                    :data="transit_waybill_list"
                    style="width: 100%">
                    <el-table-column
                        prop="invoice"
                        label="发货单号"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="shipping_addresses"
                        label="发货地址"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        label="创建时间"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="username"
                        label="客户名称">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="公司地址"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="contacts"
                        label="联系人姓名"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="phone"
                        label="联系人电话"
                        width="180">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="完成运单" name="3">
                
                <el-table
                    :data="signed_in_list"
                    style="width: 100%">
                    <el-table-column
                        prop="invoice"
                        label="发货单号"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="shipping_addresses"
                        label="发货地址"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        label="创建时间"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="username"
                        label="客户名称">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="收货地址"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="contacts"
                        label="联系人姓名"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="phone"
                        label="联系人电话"
                        width="180">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        
    </div>
</template>
<script>
import {get_order_list_get} from './axios_api/api.js'
export default {
    data() {
        return {
            order_list: [],
            transit_waybill_list: [],
            signed_in_list:[]

        }
    },
    mounted() {
        this.get_order_list()
    },
    methods: {
        create_order() {
            this.$router.push('/add_order')
        },
        get_order_list(){
            get_order_list_get().then(res => {
                console.log(res);
                this.order_list = res.order_list
                for(let i=0;i<res.order_list.length;i++){
                    if(res.order_list[i].order_state=='运输中'){
                        this.transit_waybill_list.push(res.order_list[i]);
                    }
                    if(res.order_list[i].order_state=='已签收'){
                        this.signed_in_list.push(res.order_list[i])
                    }
                }
            })
        }
    }

}
</script>

<style scoped>

    .top_btn {
        float: right;
    }
    
</style>